(function (fruit, ui, keys) {

    /**
     * @extends fruit.ui.Component
     * @class fruit.ui.DropdownButton
     <pre><code>
     var dbtn = new fruit.ui.DropdownButton({
     items:[{text: 'Open File'},{text: 'Open Folder'},{text: 'Open URL'}],
     text:'Open'
     });
     </code></pre>
     */
    fruit.ui.define('fruit.ui.DropdownButton', {
        view: {
            props: {
                'class': 'f-dropdown-btn',
                'aria-expanded': false,
                'aria-haspopup': true
            },
            content: [
                {
                    name: 'button',
                    type: 'fruit.ui.Button',
                    props: {
                        text: "{#text}",
                        hasArrow: true
                    },
                    events: {
                        "click": "{#open}"
                    }
                },
                {
                    name: 'popup',
                    type: 'fruit.ui.Popup',
                    props: {
                        role: "menu",
                        'aria-labelledby': 'dropdownbutton'
                    },
                    content: {
                        name: 'list',
                        type: 'fruit.ui.SelectableList',
                        props: {
                            labelPath: "{#labelPath}",
                            // template: "{#template}",
                            items: "{#items}"
                        }
                    }
                }
            ]
        },
        properties: {
            /**
             * @cfg {String} text
             * Get or set the text of the DropdownButton.
             * Default value is null,
             * @example DropdownButton
             */
            text: {
                value: null,
                observable: true
            },
            /**
             * @cfg {Array} items
             * Get or set the items of the list.
             * Array type
             * @example [{text: "Item 1"},{text: "Item 2"},{text: "Item 3"}]
             */
            items: {
                value: null,
                observable: true
            },
            /**
             * @cfg {String} direction
             * Get or set the direction of the popup.
             * Default value is below,
             * Support values are "below"/"above"/"auto"
             * @example below
             */
            direction: {
                value: 'outerBottom',
                observable: true
            },
            /**
             * @cfg {String} appearance
             * Get the appearance of the DropdownButton.
             * Default value is normal
             * Support values are "normal"/"mini"/"text"
             * Array type
             * @example normal
             */
            appearance: {
                value: 'normal',
                readonly: true,
                observable: true
            },
//            template: {
//                value: new fruit.ui.SelectableListItem(),
//                observable: true
//            },
            labelPath: {
                value: 'name',
                observable: true
            }
        },
        methods: {
            onInit: function () {
                this.inherited();
                this.focusable = true;
            },
            /**
             * Open the dropdown list.
             * @method open
             */
            open: function () {
                var self = this;
                var appearance = this.appearance();
                var offsetX, offsetY, aboveOffsetY, direction;

                switch (appearance) {
                    case 'mini':
                        offsetX = 0;
                        offsetY = -1;
                        aboveOffsetY = -4;
                        break;
                    case 'text':
                        offsetX = 0;
                        offsetY = 0;
                        aboveOffsetY = 0;
                        break;
                    case 'arrow':
                        offsetX = 0;
                        offsetY = 0;
                        aboveOffsetY = -1;
                        break;
                    default:
                        offsetX = 0;
                        offsetY = 1;
                        aboveOffsetY = -5;
                        break;
                }

                //this.popup.open(this.getOption('direction'), {x:offsetX, y:offsetY,eqWidth:true});
                direction = this.direction();
                this.$("popup").open({
                    target: this,
                    position: direction,
                    //offsetX: offsetX,
                    //offsetY: direction == "above" ? aboveOffsetY : offsetY,
                    //  width: 90,
                    align: true
                });
//                this.setAttribute('aria-expanded', true);
//                this.list.focus();
//                this.button.addClass('f-dropdown-btn-focus');
//                this.button.addClass('f-btn-focus');
            },
            /**
             * close the dropdown list.
             * @method close
             */
            close: function () {
                this.popup.close();
                this.setAttribute('aria-expanded', false);
                this.button.removeClass('f-dropdown-btn-focus');
                this.button.removeClass('f-btn-focus');
            },
            __button_click: function () {
                this.open();
            },
            __button_focus: function () {
                this.button.addClass('f-dropdown-btn-focus');
                this.button.addClass('f-btn-focus');
            },
            __button_blur: function () {
                this.button.removeClass('f-dropdown-btn-focus');
                this.button.removeClass('f-btn-focus');
            },
            __button_keydown: function (sender, event) {
                if (event.keyCode !== keys.TAB) {
                    event.preventDefault();
                }
            },
            __button_keyup: function (sender, event) {
                if (event.hasSystemKey) {
                    return;
                }
                switch (event.keyCode) {
                    case keys.UP_ARROW:
                        if (this.popup.opened) {
                            this.list.prevItem();
                        }
                        event.preventDefault();
                        break;
                    case keys.DOWN_ARROW:
                        if (this.popup.opened) {
                            this.list.nextItem();
                        }
                        else {
                            this.open();
                        }
                        event.preventDefault();
                        break;
                    case keys.SPACE:
                    case keys.ENTER:
                        if (this.popup.opened) {
                            this.list.execute();
                        }
                        event.preventDefault();
                        break;
                    case keys.ESCAPE:
                        this.close();
                        event.preventDefault();
                        break;
                }

                event.routing = 'none';
            },
            __list_cancel: function () {
                this.close();
            },
            __list_execute: function () {
                this.close();
                this.button.focus();
            }
        }
    });

})(fruit, fruit.ui, fruit.util.keys);
